import QtQuick 2.12
import QtQuick.Controls 2.5
import QtMultimedia 5.4


Page {
    property int nBottomMargin: 80
    property int nSideOffset: 80
    property int nRightMargin: 50
    property int nAniDuration: 300

    signal leave()
    signal gotoCookingGuide()
    signal gotoAutoSetting()
    signal gotoTaste()


    Rectangle {
        color: "white"
        anchors.fill: parent
        opacity: 0.5
    }



    Text {
        id: t
        opacity: 0
        height: 85
        width: 684
        text: "Roast Chicken"
        color: "#BEBEBE"
        font.pixelSize: 96
        font.family: "GothamBook"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        //        anchors.topMargin: 60
        anchors.topMargin: 120
    }

    Rectangle {
        id: roastchicken
        opacity: 0
        color: "transparent"
        anchors.top: t.bottom
        anchors.topMargin: 78
        anchors.left: parent.left
        anchors.leftMargin: 503
        width: 954
        height: 858 //758
        radius: 100
        Image {
            id: img3
            anchors.fill: parent
            source: "qrc:/imgs/roasterChickenBig.png"
            //            Behavior on scale { PropertyAnimation{duration: 100}}
        }
    }


    Text {
        id: t2
        opacity: 0
        width: 619
        height: 240
        text: "Roast Chicken is a traditional\ndish which is seasoned with meat\nseasoning with pear juice and\nbaked on the charcoal fire."
        color: "#BEBEBE"
        font.pixelSize: 36
        font.family: "GothamBook"
        anchors.left: parent.left
        anchors.leftMargin: 37
        anchors.top: t.bottom
        anchors.topMargin: 260
        lineHeightMode: Text.FixedHeight
        lineHeight: 60
    }



    Row {
        id: rowBtns
        opacity: 0
        anchors.left: t2.left
        anchors.top: t2.bottom
        anchors.topMargin: 55
        spacing: 18

        Image {
            width: 120
            height: 96
            source: "qrc:/imgs/autoSetting.png"
            Behavior on scale { PropertyAnimation{duration: 100}}

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    parent.scale = 1.2
                }
                onExited: {
                    parent.scale = 1.0
                }

                onClicked: {
                    //                sound_taskStart.play()
                    //                    aniRectMore.to = 0
                    //                    aniRectMore.start()
                    //                    rectMore.anchors.rightMargin = 0
                    //                    t.anchors.topMargin = 30

                    //                    aniSeq.start()
                    emit: gotoAutoSetting()
                }
            }
        }

        Image {
            id: itaste
            width: 120
            height: 96
            source: "qrc:/imgs/taste.png"
            Behavior on scale { PropertyAnimation{duration: 100}}

            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    parent.scale = 1.2
                }
                onExited: {
                    parent.scale = 1.0
                }

                onClicked: {
                    //                sound_taskStart.play()
                    emit: gotoTaste()
                }
            }
        }

        Rectangle {
            width: 42
            height: 96
            color: "transparent"
            Rectangle {
                anchors.centerIn: parent
                width: 2
                height: 96
            }
        }



        Image {
            id: iguide
            width: 120
            height: 96
            source: "qrc:/imgs/cookGuide.png"
            Behavior on scale { PropertyAnimation{duration: 100}}
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    parent.scale = 1.2
                }
                onExited: {
                    parent.scale = 1.0
                }

                onClicked: {
                    //                sound_taskStart.play()
                    emit: gotoCookingGuide()
                }
            }
        }
    }


    Column {
        id: rectMore
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: -200  // normal: 0

        Rectangle {
            width: 200
            height: 130
            color: "transparent"
            Text {
                anchors.right: parent.right
                anchors.rightMargin: 55
                anchors.top: parent.top
                anchors.topMargin: 95
                text: "More"
                color: "white"
                font.family: "GothamBold"
                font.pixelSize: 36
            }
        }

        Rectangle {
            width: 200
            height: 142
            color: "transparent"
            Rectangle {
                width: 153
                height: 1
                color: "white"
                anchors.top: parent.top
                anchors.topMargin: 79
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }

        ListView {
            width: 200
            spacing: 120
            height: 1000
            clip: true

            delegate: Rectangle {
                height: 162
                width: 200
                color: "transparent"
                Image {
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 119
                    height: 116
                    source: src
                }
                Image {
                    visible: txt === "Roast Chicken"
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 119
                    height: 116
                    source: "qrc:/imgs/focusCircle.png"
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: parent.bottom
                    height: 22
                    color: "white"
                    text: txt
                    font.family: "GothamBook"
                    font.pixelSize: 24
                }
            }

            model: ListModel {
                id: lm
                ListElement {
                    src: "qrc:/imgs/grilledsteak.png"
                    txt: "Grilled Steak"
                }
                ListElement {
                    src: "qrc:/imgs/roastchicken.png"
                    txt: "Roast Chicken"
                }
                ListElement {
                    src: "qrc:/imgs/bratwurst.png"
                    txt: "Bratwurst"
                }
            }
        }
    }

    Rectangle {
        id: rightLine
        height: 1080
        width: 1
        color: Qt.rgba(255,255,255,0.20);
        anchors.right: rectMore.left
        anchors.top: parent.top
    }


    SequentialAnimation {
        id: aniSeq
        ParallelAnimation {
            NumberAnimation { targets: [t,t2, roastchicken, rowBtns]; property: "opacity"; to: 1.0; duration: 300 }
            NumberAnimation { target: t; property: "anchors.topMargin"; to: 60; duration: 300 }
        }

        NumberAnimation { target: rectMore; property: "anchors.rightMargin"; to: 0; duration: nAniDuration }
    }


    function playAni() {
        resetAni()
        aniSeq.start()
    }

    function resetAni() {
        t.opacity = 0
        t2.opacity = 0
        roastchicken.opacity = 0
        rowBtns.opacity = 0
        t.anchors.topMargin = 120
        rectMore.anchors.rightMargin = -200
    }




}



